const toggleBatchBtn = document.querySelector("#toggleBatchBtn"); // 显示标签的按钮
const batch = document.querySelector("#batch"); // ul 标签
async function get() {
  const result = await axios({
    url: "/student/overview",
  });
  console.log(result.data.data);
  document.querySelector(".avgAge").innerText = result.data.data.avgAge;
  document.querySelector(".total").innerText = result.data.data.total;
  document.querySelector(".proportion").innerText = result.data.data.proportion;
  document.querySelector(".avgSalary").innerText = result.data.data.avgSalary;
}
get();
/* {
    "total": 56,
    "avgSalary": "12663.04",
    "avgAge": "23.77",
    "proportion": "1.33"
} */

async function geti() {
  const result = await axios({
    url: "/student/list",
  });
  console.log(result);

  haha(result.data.data);
  renderPie(result.data.data);
}
geti();
function haha(e) {
  const name = e.map((item) => item.name);
  const salary = e.map((item) => item.salary);
  const truesalary = e.map((item) => item.truesalary);

  const myChart = echarts.init(document.querySelector(".line"));

  // 指定图表的配置项和数据
  const option = {
    title: {
      text: "",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {},

    xAxis: {
      type: "category",
      boundaryGap: false,
      data: name,
    },
    yAxis: {
      type: "value",
    },
    dataZoom: [
      {
        type: "inside",
        start: 0,
        end: 10,
      },
      {
        start: 0,
        end: 10,
      },
    ],
    series: [
      {
        smooth: true,
        name: "期望薪资",
        type: "line",
        data: salary,
        symbol: "circle",
        color: ["red"],
      },
      {
        name: "实际薪资",
        type: "line",
        data: truesalary,
        smooth: true,
        symbol: "circle",
        color: ["blue"],
      },
    ],
  };
  myChart.setOption(option);
}

async function getTwo(batch = 1) {
  const result = await axios({
    url: "/score/batch",
    params: {
      batch,
    },
  });
  //   console.log(result);
  // 解构
  const { group, avgScore, lt60, gt60, gt80 } = result.data.data;
  //   console.log(group);
  const myChart = echarts.init(document.querySelector(".barChart"));

  // 指定图表的配置项和数据
  const option = {
    grid: {
      top: 20,
      bottom: 20,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999",
        },
      },
    },

    legend: {
      botton: 20,
      data: ["平均分", "低于60分人数", "60到80之间", "高于80分人数"],
    },
    xAxis: [
      {
        type: "category",
        data: group,
        axisPointer: {
          type: "shadow",
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        min: 0,
        max: 100,
        axisLabel: {
          formatter: "{value} 分",
        },
      },
      {
        type: "value",

        min: 0,
        max: 10,
        interval: 5,
        axisLabel: {
          formatter: "{value} 人",
        },
      },
    ],
    series: [
      {
        // right: 10,
        name: "平均分",
        type: "bar",

        data: avgScore,
      },
      {
        name: "低于60分人数",
        type: "bar",
        yAxisIndex: 1,
        data: lt60,
      },
      {
        name: "60到80之间",
        type: "bar",
        yAxisIndex: 1, // 0代表跟左边对齐 1代表跟右边对齐

        data: gt60,
      },
      {
        name: "高于80分人数",
        type: "bar",
        yAxisIndex: 1, // 0代表跟左边对齐 1代表跟右边对齐

        data: gt80,
      },
    ],
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}
getTwo();

toggleBatchBtn.addEventListener("click", function (e) {
  batch.classList.toggle("batch_show");
});

batch.addEventListener("click", function (e) {
  if (e.target.nodeName === "A") {
    // console.log(122);
    const batch = e.target.dataset.index;
    getTwo(batch);
  }
});
// 饼图
function renderPie(list) {
  const newList = [];
  for (let index = 0; index < list.length; index++) {
    const element = list[index];
    const i = newList.findIndex((item) => item.name === element.province);
    if (i === -1) {
      newList.push({ value: 1, name: element.province });
    } else {
      newList[i].value++;
    }
  }

  const myChart = echarts.init(document.querySelector(".pie"));

  // 指定图表的配置项和数据
  const option = {
    title: { text: "籍贯" },
    series: [
      {
        name: "Nightingale Chart",
        type: "pie",
        radius: [10, 150],
        center: ["50%", "50%"],
        roseType: "area",
        itemStyle: {
          borderRadius: 8,
        },
        data: newList,
      },
    ],
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}
